<template>
    <div class="product-footer">

                <div class="n-btnwrap">
                    <a class="collect " href="javascript:;" >收藏</a> 
                    <router-link tag="a"  class="cart" to="/shopcart">
                        购物车<span class="count">{{quantity}}</span>
                    </router-link>
                    <!-- <a class="cart" href="//m-buy.kaola.com/cart.html?p_kpm=MjAxOA%3D%3D.aHR0cHM6Ly9tLmthb2xhLmNvbS8%3D.aG90c2t1.MQ%3D%3D%40%40Xw%3D%3D&amp;kpm=MjAxOA%3D%3D.bS1nb29kcy5rYW9sYS5jb20vcHJvZHVjdC8xMjY4MzExLmh0bWw%3D.Xw%3D%3D._">购物车
                     
                    </a> -->
                    <a class="btn-1" href="#" @click="changeFlag">
                        加入购物车
                    </a>
                     <a class="btn-2 " href="javascript:;" >立即购买</a>
                </div>

 
    </div>

</template>
<script>
export default {
  
    props: [
        "changeFlag",
        "flag"
    ],
    computed: {
        quantity(){
            let localInfo =this.$store.getters["ShopCartInfo"]
            let quantity = 0
            localInfo.map((item)=>{
                quantity += item.quantity
            })
            return quantity
        }
    }

}
</script>

<style lang="stylus" scoped>
    .product-footer
        position fixed
        bottom 0
        left 0
        width 100%
        height .50rem
        background #fff
    .n-btnwrap  

        display flex
        height .50rem
        align-items center
        a
            display block
            height .50rem
            vertical-align top
            font-size .15rem
            line-height .50rem
            text-align center
            box-sizing border-box
            &:hover
                text-decoration none
        .collect
            position relative
            width .40rem
            padding-top .12rem
            border-top 1px solid #ddd
            color #666
            font-size .09rem
            font-family PingFangSC-Medium
            &:after
                content ""
                position absolute
                width .24rem
                height .20rem
                top .07rem
                left .08rem
                background url(//w.kl.126.net/goods/dist/m/img/producticon.b67ad86.png) no-repeat -1.76rem -1.28rem
                background-size 2rem
        .cart
            position relative
            width .55rem
            padding-top .12rem
            border-top 1px solid #ddd
            color #666
            font-size .09rem
            font-family PingFangSC-Medium
            background url(//w.kl.126.net/goods/dist/m/img/producticon.b67ad86.png) no-repeat -1.61rem -.27rem
            background-size 2rem
            span
                position absolute
                min-width .16rem
                height .16rem
                left .27rem
                top .02rem
                background-color #fff
                color #e31436
                border-radius .08rem
                font-size .12rem
                box-sizing: border-box
                line-height .14rem
                text-align center
                padding 0 .04rem
                border 1px solid #e31436
        .btn-1
            color #fff
            background #404040
            flex 1
        .btn-2
            flex 1
            color #fff
            background red
</style>